<template>
  <el-aside class="sidebar-container">
    <img height="50" src="@/assets/tsglogo2.png" alt="logo" class="sidebar-logo" />
    <div class="header">
      <span>桂林理工大学图书馆</span>
    </div>
    <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <div class="menu-title">
        <el-icon><Menu /></el-icon>
        <span>菜单</span>
      </div>
      <el-menu-item index="1" class="menu-item" @click="goToHome">
        <el-icon><House /></el-icon>
        <span>主页</span>
      </el-menu-item>
      <el-menu-item index="2" class="menu-item" @click="goToChart">
        <el-icon><PieChart /></el-icon>
        <span>图表</span>
      </el-menu-item>

      <div class="menu-title">
        <el-icon><Notebook /></el-icon>
        <span>借阅</span>
      </div>
      <el-menu-item index="3" class="menu-item" @click="goToBorrow">
        <el-icon><Notebook /></el-icon><!-- 借书图标 -->
        <span>书籍列表</span>
      </el-menu-item>
      <el-menu-item index="4" class="menu-item" @click="goToAllRecords">
        <el-icon><Document /></el-icon><!-- 所有借阅记录图标 -->
        <span>书籍借阅</span>
      </el-menu-item>

      <div class="menu-title">
        <el-icon><User /></el-icon>
        <span>用户中心</span>
      </div>
      <el-menu-item index="5" class="menu-item" @click="goToUserMyInfo">
        <el-icon><InfoFilled /></el-icon>
        <span>个人中心</span>
      </el-menu-item>

      <div class="menu-title">
        <el-icon><Setting /></el-icon>
        <span>设置</span>
      </div>
      <el-menu-item index="6" class="menu-item" @click="handleLogout">
        <el-icon><SwitchButton /></el-icon>
        <span>退出</span>
      </el-menu-item>
    </el-menu>

  </el-aside>


</template>

<script>
import { Document, Notebook, House, PieChart, Menu, User } from '@element-plus/icons-vue'

export default {
  name: 'UserSidebar',
  components: { Document, Notebook, House, PieChart, Menu, User },
  methods: {
    goToHome() {
      this.$router.push({ name: 'UserHome' });
    },
    goToChart() {
      this.$router.push({ name: 'Chart' });
    },
    goToBorrow() {
      this.$router.push({ name: 'Borrow' });
    },
    goToAllRecords() {
      this.$router.push({name: 'AllRecords'});
    },
    goToUserMyInfo() {
      this.$router.push({name: 'user-my-info'});
    },
    handleLogout() {
      localStorage.removeItem('username');
      this.$router.push({ name: 'Login' });
    }
  }
}
</script>

<style scoped>
.sidebar-container {
  background-color: #84c2d8;
  width: 300px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
}

/* 设置顶部标题的样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

/* 设置顶部标题图标的大小和右边距 */
.header el-icon {
  font-size: 24px;
  margin-right: 10px;
}

/* 设置菜单容器的背景颜色、宽度和高度 */
.el-menu-vertical-demo {
  background-color: #84c2d8;
  width: 100%;
  border-right: 1px solid #ddd;
  padding-top: 20px; /* 将菜单向下移动 */
}

/* 设置每个分组标题的样式 */
.menu-title {
  color: #ffffff;
  font-weight: bold;
  padding-left: 20px;
  display: flex;
  align-items: center;
  margin: 22px 0 10px 0;
}

/* 设置分组标题图标的右边距 */
.menu-title el-icon {
  margin-right: 10px;
}

/* 设置每个菜单项的图标右边距 */
.el-menu-item el-icon {
  margin-right: 10px;
}

/* 设置每个菜单项的字体大小 */
.menu-item span {
  font-size: 16px; /* 调整子功能项的字体大小 */
}
</style>
